<template>
    <div>
        <Nav>
            <div slot="left">×</div>
            <div slot="center">专业题库</div>
            <div slot="right" >···</div>
        </Nav>
        <div class="main">
            <Intro>
            <span class="text">运动机制与原理、水的原则、水中康复治疗原则、方法、专业职责、安全与风险意识</span>
            </Intro>
            <div class="img-center">
            <img src="@/assets/images/base-images/专业题库-认证.png" alt="">
            </div>
            <img class="bgi" src="@/assets/images/base-images/背景.png" alt="">
            <div class="start">
                <div class="btn" @click="btnClick">开始答题</div>
            </div>
        </div>
        <main-tab-bar class="tab-bar-bottom"></main-tab-bar>
    </div>
</template>

<script>
import Nav from '@/components/common/Nav.vue';
import Intro from './introduce';
import MainTabBar from '@/components/tabbar/MainTabBar';
import {request} from '@/network/request.js';
    export default {
        
        components: {
            Nav,
            Intro,
            MainTabBar
        },

        created () {
            this.getProblemData();
        },
        methods: {
            async getProblemData(){
                try {
                    const res  = await request({
                        url:'api/question/index'
                    });
//------------------------------------------------------------------------ tips
                    console.log("此处需要使用请求的数据");
                } catch (error) {
                    console.log(error);
                }
            },
            btnClick() {
                this.$store.commit('resetCount')
                this.$router.push("/problems/answer")
            },
            goBack(){
                this.$router.go(-1)
            },
          
        },
    }
</script>

<style scoped>
.text{
    color: #131639;
}
.img-center{
        position: relative;
    width: 255px;
    margin: 0 auto;
}
.img-center img{

    width: 255px;
    height: 240px;
}
.main{
    position: relative;
    padding-top: 64px;
    background-image: url('../../assets/images/base-images/专业题库-背景.png');
}
.bgi{
    position:absolute;
    left: 0;
    right: 0;
    bottom: 200px;
    width: 100%;
    height: 50px;
}
.start{
    width: 100%;
    height: 176px;
}
.btn{
    font-size: 16px;
    height: 50px;
    width: 325px;
    margin: 84px auto 60px auto;
    color: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 25px;
    background: -moz-linear-gradient(left, #1fcbcf 0%, #0484c3 100%);
    background: -webkit-gradient(linear,  top left,  bottom left, color-stop(0%,#1fcbcf), color-stop(100%,#0484c3));
    background: -webkit-linear-gradient(left, #1fcbcf 0%,#0484c3 100%);
    background: -o-linear-gradient(left, #1fcbcf 0%,#0484c3 100%);
    background: -ms-linear-gradient(left, #1fcbcf 0%,#0484c3 100%);
    background: linear-gradient(to right, #1fcbcf 0%,#0484c3 100%);

}
</style>